<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="jquery/pagination.css" />
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
<script type="text/javascript">
	$(document).ready(function(){   
		displayData(0);   
	});   

	function displayData(pageNo) {
	  // alert(pageNo); 
	   $.ajax({   
	       type: "GET",
	       dataType:"json", 
	       url:'emp_data.jsp',
	       cache: false,
	       data:{pageNo:(pageNo + 1),pageSize:2,condi:$("#condi").val()},   
	       success:function(json) {   
		            //将索引号大于0的行删除 
					$("#table_data tr:gt(0)").remove();
					$.each(json.data, function(i, n) {   
						$("#table_data").append("<tr><td><input type='checkbox'></td><td>" + (i + 1) + "</td><td>" + n.code + "</td><td>" + n.name + "</td></tr>");   
					});   
					$("#pagination").pagination(json.total, {   
					    callback: displayData,   
					    prev_text: '上一页',   
					    next_text: '下一页',   
					    items_per_page:2,   
					    num_display_entries:5,   
					    current_page:pageNo,   
					    num_edge_entries:0, 
					    maxentries: json.total 
					});       
            }
	    });   
	}   
</script>
</head>
<body>

		条件：<input type="text" id="condi"/>
		<input type="button" value="查询" onclick="displayData(0); ">		
       	<table id="table_data">
            <thead>
              <tr>
                <td width="8%">
                	<input type="checkbox"/>
                </td>
	            <td width="7%">序号</td>
	            <td width="12%">员工代码</td>
	            <td width="11%">姓名</td>
	          </tr>
        	</thead>
        	
         </table>    
         <table>
         	<tr>
         		<td width="50%"></td>
         		<td width="50%"><div id="pagination"></div></td>
         	</tr>
         </table>
	  	
</body>
</html>